<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-row>
      <el-col :span="24" >
        <div style="margin: auto">
          <!--图片添加部分-->
          <SinglePictureUploadScreenshot ref="SinglePictureUploadScreenshotRef"/>
          <br/>
          <el-button plain type="warning" @click="saveMemberFamilyPicture" >{{defaultValue.title}}</el-button>
          <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
        </div>
      </el-col>
    </el-row>

    <el-divider content-position="left">列表</el-divider>

    <!--图片展示部分-->
    <div class="waterfall-div">
      <!--参考文章：https://blog.csdn.net/qq_38755190/article/details/116087324-->
      <!--https://github.com/lfyfly/vue-waterfall-easy-->
      <vue-waterfall-easy :imgsArr="waterfall.waterfallList" :width="900" :heigh="350"
                          linkRange="img"
                          hrefKey="savePath"
                          srcKey="savePath"
                          @scrollReachBottom="getMemberFamilyPicture" >
        <div class="img-info" slot-scope="props" style="text-align: center; ">
          <!--<p class="some-info">第{{props.index+1}}张图片</p>-->
          <!--{{props.value.savePath}}-->
          <el-button type="text" @click="delMemberFamilyPicture(props.value.id)">删除</el-button>
          <!--<p class="some-info">{{props.value.info}}</p>-->
        </div>
      </vue-waterfall-easy>
    </div>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>

  import SinglePictureUploadScreenshot from '../common/SinglePictureUploadScreenshot.vue'
  import http from '@/utils/http'
  import {clearInvalid, getFullDate} from "../../utils/utils"

  // 瀑布流
  import vueWaterfallEasy from 'vue-waterfall-easy'

  export default {
    name: "MemberFamilyPicture",
    components: {
      SinglePictureUploadScreenshot,
      //瀑布流
      vueWaterfallEasy,
    },
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          close: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '提交',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 社交用户ID
        memberFamilyId: null,
        // 瀑布流
        waterfall: {
          //存放计算好的数据
          waterfallList: [],
        },
      }
    },
    methods: {
      /**
       * 删除前的提示
       * @param id 上传表主键
       */
      delMemberFamilyPictureTips(id){
        this.$confirm('是否删除图片, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delMemberFamilyPicture(id)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 调用延迟删除成员照片
       * @param id
       */
      delMemberFamilyPicture(id){
        http.post("/user/delMemberFamilyPicture", {
          uploadFileId: id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.waterfall.waterfallList = []
          this.getMemberFamilyPicture()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 保存成员的照片
       */
      saveMemberFamilyPicture(){
        let formData = new FormData()
        formData.append("memberFamilyId", this.memberFamilyId)
        let uploadList = this.$refs.SinglePictureUploadScreenshotRef.upload.fileList
        uploadList.forEach((file) => {
          formData.append('file', file.raw)
        });

        http.postFileForm("/user/saveMemberFamilyPicture", formData).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          // 清空照片
          this.$refs.SinglePictureUploadScreenshotRef.upload.fileList = []
          // 隐藏
          this.$refs.SinglePictureUploadScreenshotRef.uploadHide()
          // 图片重新加载
          this.waterfall.waterfallList = []
          this.getMemberFamilyPicture()
          this.$message.success("保存成功");
          // 关闭弹出框
          // this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取上传的用户照片
       */
      getMemberFamilyPicture(){
        http.post("/user/getMemberFamilyPicture", {
          memberFamilyId: this.memberFamilyId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.waterfall.waterfallList = this.waterfall.waterfallList.concat(res.data)

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开当前弹出框
       * @param memberFamilyId 人员ID
       */
      openMemberFamilyPicturePage(memberFamilyId){
        this.memberFamilyId = memberFamilyId
        // 先清空
        this.waterfall.waterfallList = []
        this.getMemberFamilyPicture()
        this.tableConfig.show = true
      },
    },
    mounted(){

    }
  }
</script>

<style scoped>

  .waterfall-div{
    /*position: absolute;*/
    /*top: 80px;*/
    /*bottom: 0;*/
    /*left: 250px;*/
    width: 900px;
    height: 350px;
  }

</style>
